<!DOCTYPE html>
<html>
<head>
    <!-- 声明文档使用UTF-8字符编码 -->
    <meta charset="utf-8">
    <!-- 设置视口宽度为1280px，用于响应式布局 -->
    <meta name="viewport" content="width=1280" />
    <!-- 引入网站 favicon 图标 -->
    <link href="favicon.ico" rel="shortcut icon" type="image/x-icon" />
    <!-- 引入产品详情页样式表 -->
    <link rel="stylesheet" href="css/product.css">
    <title>产品详情 - 小米折叠屏手机</title>
    <!-- 页面内联样式，优先于外部样式表 -->
    <style>
        /* 全局样式重置 */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box; /* 边框盒模型，包含内边距和边框 */
            font-family: "Microsoft YaHei", sans-serif; /* 主字体（雅黑+无衬线字体备用） */
        }

        body {
            background-color: #f5f5f5; /* 页面背景色 */
            color: #333; /* 文本主色 */
        }

        .product-container {
            max-width: 1280px; /* 最大宽度，适应大屏幕 */
            margin: 0 auto; /* 水平居中 */
            padding: 20px; /* 内边距 */
            background-color: #fff; /* 白色背景 */
            box-shadow: 0 0 10px rgba(0,0,0,0.1); /* 浅阴影增加立体感 */
        }

        .product-header {
            text-align: center; /* 文本居中 */
            padding: 20px 0; /* 上下内边距 */
            border-bottom: 1px solid #eee; /* 底部细边框 */
        }

        .product-header h1 {
            font-size: 28px; /* 标题字体大小 */
            color: #ff6700; /* 主题色（橙色） */
            margin-bottom: 10px; /* 底部外边距 */
        }

        .product-content {
            display: flex; /* 弹性布局 */
            padding: 30px 0; /* 上下内边距 */
        }

        .product-image {
            flex: 2; /* 弹性因子，占2份空间 */
            text-align: center; /* 图片居中 */
            padding: 20px; /* 内边距 */
        }

        .product-image img {
            max-width: 100%; /* 图片自适应容器宽度 */
            height: auto; /* 保持宽高比 */
        }

        .product-details {
            flex: 3; /* 弹性因子，占3份空间 */
            padding: 20px; /* 内边距 */
        }

        .product-qrcode {
            flex: 1; /* 弹性因子，占1份空间 */
            text-align: center; /* 文本居中 */
            padding: 20px; /* 内边距 */
            border-left: 1px solid #eee; /* 左侧细边框 */
        }

        .product-qrcode img {
            width: 150px; /* 二维码宽度 */
            height: 150px; /* 二维码高度 */
            margin-bottom: 10px; /* 底部外边距 */
        }

        .price {
            font-size: 24px; /* 价格字体大小 */
            color: #ff6700; /* 主题色（橙色） */
            margin: 20px 0; /* 上下外边距 */
        }

        .original-price {
            text-decoration: line-through; /* 原价删除线 */
            color: #999; /* 灰色 */
            font-size: 16px; /* 字体大小 */
            margin-left: 10px; /* 左侧外边距 */
        }

        .specs {
            margin: 20px 0; /* 上下外边距 */
        }

        .specs h3 {
            margin-bottom: 10px; /* 底部外边距 */
            font-size: 18px; /* 规格标题字体大小 */
        }

        .specs ul {
            list-style-type: none; /* 去除列表符号 */
        }

        .specs li {
            padding: 5px 0; /* 上下内边距 */
            border-bottom: 1px dashed #eee; /* 底部虚线边框 */
        }

        .purchase-form {
            margin-top: 30px; /* 顶部外边距 */
            padding: 20px; /* 内边距 */
            background-color: #f9f9f9; /* 浅灰背景 */
            border-radius: 5px; /* 圆角 */
        }

        .form-group {
            margin-bottom: 15px; /* 底部外边距 */
        }

        .form-group label {
            display: block; /* 块级元素 */
            margin-bottom: 5px; /* 底部外边距 */
            font-weight: bold; /* 字体加粗 */
        }

        .form-group input, 
        .form-group select {
            width: 100%; /* 宽度占满容器 */
            padding: 10px; /* 内边距 */
            border: 1px solid #ddd; /* 浅灰边框 */
            border-radius: 4px; /* 圆角 */
        }

        .color-options, .storage-options {
            display: flex; /* 弹性布局 */
            gap: 10px; /* 选项间距 */
            margin-top: 10px; /* 顶部外边距 */
        }

        .color-option, .storage-option {
            padding: 8px 15px; /* 内边距 */
            border: 1px solid #ddd; /* 浅灰边框 */
            border-radius: 4px; /* 圆角 */
            cursor: pointer; /* 鼠标悬停变手型 */
        }

        .color-option.selected, .storage-option.selected {
            border-color: #ff6700; /* 选中时边框变主题色 */
            background-color: #fff5f0; /* 选中时浅橙背景 */
        }

        .quantity-selector {
            display: flex; /* 弹性布局 */
            align-items: center; /* 垂直居中 */
        }

        .quantity-selector button {
            padding: 5px 10px; /* 内边距 */
            background-color: #eee; /* 浅灰背景 */
            border: none; /* 无边框 */
            cursor: pointer; /* 鼠标悬停变手型 */
        }

        .quantity-selector input {
            width: 50px; /* 输入框宽度 */
            text-align: center; /* 文本居中 */
            margin: 0 10px; /* 左右外边距 */
        }

        .buy-btn {
            display: block; /* 块级元素 */
            width: 100%; /* 宽度占满容器 */
            padding: 12px; /* 内边距 */
            background-color: #ff6700; /* 主题色背景 */
            color: white; /* 白色文本 */
            border: none; /* 无边框 */
            border-radius: 4px; /* 圆角 */
            font-size: 16px; /* 字体大小 */
            cursor: pointer; /* 鼠标悬停变手型 */
            margin-top: 20px; /* 顶部外边距 */
        }

        .buy-btn:hover {
            background-color: #ff4500; /* 悬停时深橙色背景 */
        }

        .payment-modal {
            display: none; /* 隐藏模态框 */
            position: fixed; /* 固定定位 */
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0,0,0,0.5); /* 半透明黑色背景 */
            z-index: 1000; /* 最高层级 */
            justify-content: center; /* 水平居中 */
            align-items: center; /* 垂直居中 */
        }

        .payment-content {
            background-color: white; /* 白色内容区 */
            padding: 30px; /* 内边距 */
            border-radius: 5px; /* 圆角 */
            width: 400px; /* 内容区宽度 */
            text-align: center; /* 文本居中 */
        }

        .payment-success {
            color: #4CAF50; /* 绿色成功色 */
            font-size: 24px; /* 字体大小 */
            margin-bottom: 20px; /* 底部外边距 */
        }

        .payment-close {
            padding: 8px 20px; /* 内边距 */
            background-color: #ff6700; /* 主题色背景 */
            color: white; /* 白色文本 */
            border: none; /* 无边框 */
            border-radius: 4px; /* 圆角 */
            cursor: pointer; /* 鼠标悬停变手型 */
        }

        .back-btn {
            display: inline-block; /* 行内块元素 */
            padding: 10px 20px; /* 内边距 */
            background-color: #ff6700; /* 主题色背景 */
            color: white; /* 白色文本 */
            text-decoration: none; /* 去除下划线 */
            border-radius: 4px; /* 圆角 */
            margin-top: 20px; /* 顶部外边距 */
        }

        .product-footer {
            text-align: center; /* 文本居中 */
            padding: 20px 0; /* 上下内边距 */
            border-top: 1px solid #eee; /* 顶部细边框 */
        }
    </style>
</head>
<body>
    <!-- 产品容器 -->
    <div class="product-container">
        <!-- 产品头部 -->
        <div class="product-header">
            <h1 id="product-title">小米MIX FOLD</h1> <!-- 产品主标题，动态更新 -->
            <p id="product-subtitle">小米折叠屏手机</p> <!-- 产品副标题，动态更新 -->
        </div>
        <!-- 产品内容区（弹性布局） -->
        <div class="product-content">
            <!-- 产品图片区 -->
            <div class="product-image">
                <img id="product-image" src="img/li14.png" alt="小米MIX FOLD"> <!-- 产品主图 -->
            </div>
            <!-- 产品详情区 -->
            <div class="product-details">
                <!-- 价格区域 -->
                <div class="price">
                    <span id="product-price">7999元</span> <!-- 当前价格，动态更新 -->
                    <span class="original-price" id="original-price">8999元</span> <!-- 原价 -->
                </div>

                <!-- 规格区域 -->
                <div class="specs">
                    <h3>产品规格</h3>
                    <ul id="product-specs">
                        <li>屏幕尺寸: 8.01英寸折叠屏</li>
                        <li>处理器: 骁龙888</li>
                        <li>内存: 12GB</li>
                        <li>存储: 256GB/512GB</li>
                        <li>摄像头: 1亿像素三摄</li>
                        <li>电池: 5020mAh</li>
                        <li>快充: 67W有线快充</li>
                    </ul>
                </div>

                <!-- 购买表单 -->
                <div class="purchase-form">
                    <!-- 颜色选择 -->
                    <div class="form-group">
                        <label>选择颜色</label>
                        <div class="color-options">
                            <div class="color-option selected" data-color="黑色">黑色</div>
                            <div class="color-option" data-color="白色">白色</div>
                            <div class="color-option" data-color="蓝色">蓝色</div>
                        </div>
                    </div>

                    <!-- 存储选择 -->
                    <div class="form-group">
                        <label>选择存储容量</label>
                        <div class="storage-options">
                            <div class="storage-option selected" data-storage="256GB" data-price="7999">256GB</div>
                            <div class="storage-option" data-storage="512GB" data-price="8999">512GB</div>
                        </div>
                    </div>

                    <!-- 数量选择 -->
                    <div class="form-group">
                        <label>购买数量</label>
                        <div class="quantity-selector">
                            <button id="decrease-qty">-</button> <!-- 减少数量按钮 -->
                            <input type="number" id="quantity" value="1" min="1" max="10"> <!-- 数量输入框 -->
                            <button id="increase-qty">+</button> <!-- 增加数量按钮 -->
                        </div>
                    </div>

                    <!-- 地址输入 -->
                    <div class="form-group">
                        <label>收货地址</label>
                        <input type="text" id="address" placeholder="请输入收货地址">
                    </div>

                    <!-- 电话输入 -->
                    <div class="form-group">
                        <label>联系电话</label>
                        <input type="tel" id="phone" placeholder="请输入联系电话">
                    </div>

                    <!-- 购买按钮 -->
                    <button class="buy-btn" id="buy-btn">立即购买</button>
                </div>
            </div>
        </div>

        <!-- 产品底部 -->
        <div class="product-footer">
            <a href="index.html" class="back-btn">返回首页</a> <!-- 返回首页按钮 -->
        </div>
    </div>

    <!-- 支付成功模态框 -->
    <div class="payment-modal" id="payment-modal">
        <div class="payment-content">
            <div class="payment-success">✓ 支付成功</div> <!-- 成功提示 -->
            <p>感谢您的购买！</p>
            <p>订单号: <span id="order-number">XM20230615</span></p> <!-- 动态订单号 -->
            <p>我们将在3个工作日内为您发货</p>
            <button class="payment-close" id="payment-close">关闭</button> <!-- 关闭模态框按钮 -->
        </div>
    </div>

    <script>
        // DOM加载完成后执行
        document.addEventListener('DOMContentLoaded', function() {
            // 获取URL参数中的产品ID
            const urlParams = new URLSearchParams(window.location.search);
            const productId = urlParams.get('id');

            // 根据产品ID加载产品信息
            if (productId) {
                const product = getProductById(productId);
                if (product) {
                    // 更新页面元素为对应产品信息
                    document.getElementById('product-title').textContent = product.title;
                    document.getElementById('product-subtitle').textContent = product.subtitle;
                    document.getElementById('product-image').src = product.image;
                    document.getElementById('product-price').textContent = product.price + '元';
                    document.getElementById('original-price').textContent = product.originalPrice ? product.originalPrice + '元' : '';
                    document.getElementById('product-specs').innerHTML = product.specs.map(spec => `<li>${spec}</li>`).join('');
                }
            }

            // 颜色选择交互
            const colorOptions = document.querySelectorAll('.color-option');
            colorOptions.forEach(option => {
                option.addEventListener('click', function() {
                    // 移除所有选项的选中状态
                    colorOptions.forEach(opt => opt.classList.remove('selected'));
                    // 添加当前选项的选中状态
                    this.classList.add('selected');
                });
            });

            // 存储选择交互（含价格更新）
            const storageOptions = document.querySelectorAll('.storage-option');
            storageOptions.forEach(option => {
                option.addEventListener('click', function() {
                    // 移除所有选项的选中状态
                    storageOptions.forEach(opt => opt.classList.remove('selected'));
                    // 添加当前选项的选中状态
                    this.classList.add('selected');
                    // 更新显示价格为当前选项价格
                    document.getElementById('product-price').textContent = this.dataset.price + '元';
                });
            });

            // 数量减少按钮事件
            document.getElementById('decrease-qty').addEventListener('click', function() {
                const input = document.getElementById('quantity');
                if (input.value > 1) input.value--; // 数量至少为1
            });

            // 数量增加按钮事件
            document.getElementById('increase-qty').addEventListener('click', function() {
                const input = document.getElementById('quantity');
                if (input.value < 10) input.value++; // 数量最多为10
            });

            // 立即购买按钮事件
            document.getElementById('buy-btn').addEventListener('click', function() {
                const address = document.getElementById('address').value;
                const phone = document.getElementById('phone').value;

                // 校验必填字段
                if (!address || !phone) {
                    alert('请填写完整的收货信息');
                    return;
                }

                // 显示支付成功模态框
                document.getElementById('payment-modal').style.display = 'flex';

                // 生成动态订单号（当前时间戳）
                document.getElementById('order-number').textContent = 'XM' + new Date().getTime();
            });

            // 关闭模态框事件
            document.getElementById('payment-close').addEventListener('click', function() {
                document.getElementById('payment-modal').style.display = 'none';
            });
        });

        // 模拟产品数据接口（实际开发中应替换为真实API）
        function getProductById(id) {
            const products = {
                'mix-fold': {
                    title: '小米MIX FOLD',
                    subtitle: '小米折叠屏手机',
                    image: 'img/li14.png',
                    price: 7999,
                    originalPrice: 8999,
                    specs: [
                        '屏幕尺寸: 8.01英寸折叠屏',
                        '处理器: 骁龙888',
                        '内存: 12GB',
                        '存储: 256GB/512GB',
                        '摄像头: 1亿像素三摄',
                        '电池: 5020mAh',
                        '快充: 67W有线快充'
                    ]
                },
                'xiaomi11': {
                    title: 'Xiaomi 11 青春活力版',
                    subtitle: '轻薄5G，内外皆出彩',
                    image: 'img/d11.webp',
                    price: 1999,
                    originalPrice: 2299,
                    specs: [
                        '屏幕尺寸: 6.55英寸AMOLED',
                        '处理器: 骁龙778G',
                        '内存: 8GB',
                        '存储: 128GB/256GB',
                        '摄像头: 6400万三摄',
                        '电池: 4250mAh',
                        '快充: 33W有线快充'
                    ]
                }
            };

            return products[id] || null; // 返回匹配产品或null
        }
    </script>
</body>
</html>